<template>
  <div id="section">
    <main>
      <input type="checkbox" v-model="isAll" @click="CheckAll" />
      <span style="fontsize: 0.3rem">ZTE中兴</span>

      <div v-for="(item, index) in cartList" :key="item.id">
        <div id="one">
          <input
            type="checkbox"
            :value="item"
            v-model="CheckLink"
            @change="CheckShop"
          />
          <img :src="item.src" alt="" />
          <div>
            <b>{{ item.name }}</b>
            <p>
              颜色：{{ item.color }} 版本：{{ item.edition }} 套餐类型：{{
                item.type
              }}
            </p>
            <span>￥{{ item.pirce }}</span>
          </div>
        </div>
        <main id="calc">
          <button @click="jian(index)" :disabled="cartList[index].count == 1">
            -
          </button>
          <input type="text" v-model="cartList[index].count" />
          <button @click="jia(index)">+</button>
        </main>
      </div>
    </main>
    <div id="win">
      <div>
        <p>
          合计：<span
            >￥<b>{{ sum() }}</b></span
          >
        </p>
        <span>（已优惠￥0元）</span>
      </div>
      <p> 商品总数{{ count }}</p>
      <p>已选 {{ selectedcount }}</p>
      <button>去结算</button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Stepper } from "vant";

Vue.use(Stepper);
export default {
  data() {
    return {
      //  value: 1,

      isAll: false,
      CheckLink: [],
      cartList: [
        {
          id: 1,
          name: "ZTE WATCH GT 智能手表",
          color: "黑曜",
          edition: "8GB+128GB",
          type: "官方标配",
          pirce: 599,
          src: "https://image.ztemall.com/6a8987b791424a2be4a4c227f5af91bd.jpg",
          count: 1,
        },
        {
          id: 2,
          name: "中兴 Axon 40 Pro",
          color: "星际黑",
          edition: "128GB+256GB",
          type: "官方标配",
          pirce: 3798,
          src: "https://image.ztemall.com/e3776e1358bb9e560a267958f988ce34.jpg",
          count: 1,
        },
        {
          id: 3,
          name: "ZTE WATCH GT 智能手表",
          color: "朋克黑",
          edition: "暂无分类",
          type: "官方标配",
          pirce: 599,
          src: "https://image.ztemall.com/d31f58f151324e6171bfd668669a891c.jpg?x-oss-process=image/resize,w_220,h_220",
          count: 1,
        },
         {
          id: 4,
          name: "中兴 AX3000 巡天版 WIFI 6 路由器",
          color: "白色",
          edition: "暂无分类",
          type: "暂无套餐",
          pirce: 289,
          src: "https://image.ztemall.com/df00d491ec8a0f3167147eb4cf5016e5.jpg?x-oss-process=image/resize,w_220,h_220",
          count: 1,
        },
      ],
    };
  },
  methods: {
    jian(index) {
      this.cartList[index].count -= 1;
    },
    jia(index) {
      this.cartList[index].count += 1;
    },
    selectAll() {
      this.checkOne = [];
      if (!this.checkAll) {
        for (var i = 0; i < this.cartList.length; i++) {
          this.checkOne.push(this.cartList[i].id);
        }
      } else {
        this.checkOne = [];
        this.checkAll = false;
      }
    },
    CheckAll() {
      if (!this.isAll) {
        this.CheckLink = this.cartList;
      } else {
        this.CheckLink = [];
      }
    },
    CheckShop() {
      if (this.CheckLink.length === this.cartList.length) {
        this.isAll = true;
      } else {
        this.isAll = false;
      }
    },
    sum() {
      var total = 0;
      this.CheckLink.forEach((el) => {
        total += el.pirce * el.count;
      });
      return total;
    },
  },
  computed: {
    // sum() {
    //   var total = 0;
    //   for (var i = 0; i < this.cartList.length; i++) {
    //     total += this.cartList[i].pirce * this.cartList[i].count;
    //   }
    //   console.log(total);
    //   return total;
    // },
    count() {
      var total = 0;
      for (var i = 0; i < this.cartList.length; i++) {
        total += parseInt(this.cartList[i].count);
      }
   
      return total;
    },
    selectedcount(){
      var total = 0;
      for (var i = 0; i < this.CheckLink.length; i++) {
        total += parseInt(this.CheckLink[i].count);
      }
    
      return total;
    }
  },
};
</script>

<style lang="scss" scoped>
#section {
  width: 100%;
  background-color: #f4f4f4;
  /* height: 8rem; */
  display: flex;
  flex-direction: column;
  align-items: center;

  main {
    background-color: #fff;
    width: 90%;
    margin-top: 0.3rem;
    border-radius: 0.2rem;
    padding-bottom: 0.3rem;
    input {
      margin-left: -5rem;
      margin-right: 0.2rem;
      margin-top: 0.2rem;
    }
    #one {
      display: flex;
      margin-left: 3.5rem;
      align-items: center;

      input {
        margin-left: -3rem;
      }
      img {
        width: 2rem;
        height: 2rem;
      }
      div {
        display: flex;
        flex-direction: column;
        /* background-color: pink; */

        text-align: left;
        padding-left: 0.2rem;
        box-sizing: border-box;
        b {
          margin-bottom: 0.15rem;
          font-weight: 500;
          font-size: 0.25rem;
        }
        p {
          margin-bottom: 0.1rem;
        }
        span {
          font-size: 0.3rem;
          font-weight: 500;
          color: red;
        }
      }
    }
    #calc {
      width: 1.8rem;
      margin-left: 4.8rem;
      input {
        /* height: ; */
        width: 0.4rem;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        border: 0;
        background-color: #e9e9e9;
        height: 0.38rem;
      }
      button {
        border: 0;
        background-color: #fff;
        border: #e9e9e9 solid 0.01rem;
      }
    }
  }
}
#win {
  width: 100%;
  height: 1rem;
  background-color: white;
  position: fixed;
  bottom: 0.8rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3rem;
  box-sizing: border-box;
  align-items: center;
  div {
    p {
      font-size: 0.25rem;
      margin-top: 0.1rem;
      margin-bottom: 0.1rem;
      span {
        color: #ff4b50;
        b {
          font-size: 0.35rem;
        }
      }
    }
  }
  p {
    font-size: 0.3rem;
  }
  button {
    height: 0.6rem;
    width: 2rem;
    border: 0;
    border-radius: 0.4rem;
    background-color: #ff4b50;
    color: #f4f4f4;
  }
}
</style>